import React, { Component } from 'react'
import PropTypes from 'prop-types'


export default class TodoMain extends Component {
    state = {
        id: -1,//此状态记录鼠标是否移入
    }
    // 进行类型限制
    static propTypes = {
        // 要求todoList是数组类型，并且值不能是undefined
        todoList: PropTypes.array.isRequired,
        // 要求changeIsCheckedById是函数类型，并且值不能是undefined
        changeIsCheckedById: PropTypes.func.isRequired
    }
    render() {
        const {todoList, changeIsCheckedById, delTodoById} = this.props
        return (
            <div>
                <ul className="todo-main">
                    {
                        todoList.map((item) => (
                            <li key={item.id} 
                                // 鼠标移入移出，显示隐藏删除按钮
                                onMouseEnter={()=>this.setState({id:item.id})}
                                onMouseLeave={()=>this.setState({id:-1})}
                            >
                                <label>
                                    <input onChange={()=>changeIsCheckedById(item.id)} checked={item.isChecked} type="checkbox" />
                                    <span>{ item.title }</span>
                                </label>
                                <button onClick={()=>delTodoById(item.id)} className="btn btn-danger" style={{ display: this.state.id===item.id?'block':'none' }}>删除</button>
                            </li>
                        ))
                    }
                </ul>
            </div>
        )
    }
}
